<script setup>

//-----------------导入包--------------------

// ref用于存储动态数据
import {ref, onMounted, computed} from 'vue'
// axios 发送请求
import axios from "axios";
import {HttpStatusCode} from "axios"
import {CircleCheckFilled, WarningFilled} from '@element-plus/icons-vue'
import {toRaw} from "@vue/reactivity"
import {reactive} from 'vue';
import {column} from 'element-plus/es/components/table-v2/src/common';


//-------------------全局变量------------------

const proxy_echo_status = ref('');

const jdbc_type = ref('');
const jdbc_url = ref('');
const jdbc_username = ref('');
const jdbc_password = ref('');
const jdbc_is_connected = ref(false);

const db_list = ref([]);
const db_name = ref('');

const table_list = ref([]);
const table_name = ref('');

const query_result = ref([]);
const query_sql = ref('');

const auto_commit_status = ref(true);


const insertdialogVisible = ref(false);
let insertform = ref();
let insertform2 = ref();
let Cno = ref();

const dialogVisible = ref(false);
const delDialogVisible = ref(false);
let form = ref();
let oldform = ref();

const resetParams = function () {
  proxy_echo_status.value = '';

  jdbc_type.value = '';
  jdbc_url.value = '';
  jdbc_username.value = '';
  jdbc_password.value = '';
  jdbc_is_connected.value = false;

  db_list.value = [];
  db_name.value = '';

  table_list.value = [];
  table_name.value = '';

  query_result.value = [];
  query_sql.value = '';
};


const globalVariables = ref([
  {key: 'proxy_echo_status', value: proxy_echo_status},
  {key: 'jdbc_type', value: jdbc_type},
  {key: 'jdbc_url', value: jdbc_url},
  {key: 'jdbc_username', value: jdbc_username},
  {key: 'jdbc_password', value: jdbc_password},
  {key: 'jdbc_is_connected', value: jdbc_is_connected},
  {key: 'db_list', value: db_list},
  {key: 'db_name', value: db_name},
  {key: 'table_list', value: table_list},
  {key: 'table_name', value: table_name},
  // { key: 'query_result', value: query_result },
  {key: 'query_sql', value: query_sql}
]);

const isEditable = function (variable) {
  const valueType = typeof variable.value;
  return valueType === 'string' || valueType === 'number' || valueType === 'object';
}

//-------------------函数------------------


// axios测试
// 代理在vue.config.js中设置，注意url的path代理完不会变
const testProxyConnection = function () {
  axios.get("/echo/get")
      .then(function (response) {
        proxy_echo_status.value = response.statusText;
        console.log("testProxyConnection: ", response);
      })
      .catch(function (error) {
        proxy_echo_status.value = error;
        console.error("testProxyConnection: ", error);
      })
      .finally(function () {
        console.log("testProxyConnection: axios done")
      })
}

//获取当前数据库连接
const getJdbcConnection = function () {
  console.log("getJdbcConnection: called")
  axios.get("/api/config/get")
      .then(function (response) {
        // 能到达此处，HTTP的状态码已经有axios校验过，仅需处理若依封装的状态码

        // 从响应中取若依封装的AjaxResult
        const result = response.data
        if (
            !Object.hasOwn(result, "code") ||
            !Object.hasOwn(result, "data") ||
            result.code !== HttpStatusCode.Ok
        ) {
          if (Object.hasOwn(result, "msg"))
            window.alert("getJdbcConnection: " + result.msg)
          console.error("getJdbcConnection: result code error", result);
          // 状态错误，连接未建立
          resetParams()
          return;
        }

        const jdbc_prop = result.data;

        if (
            !Object.hasOwn(jdbc_prop, "db") ||
            !Object.hasOwn(jdbc_prop, "address") ||
            !Object.hasOwn(jdbc_prop, "username") ||
            !Object.hasOwn(jdbc_prop, "password")
        ) {
          resetParams()
          console.error("getJdbcConnection: response jdbc prop format illegal", jdbc_prop);
          return;
        }

        jdbc_type.value = jdbc_prop.db;
        jdbc_url.value = jdbc_prop.address;
        jdbc_username.value = jdbc_prop.username;
        jdbc_password.value = jdbc_prop.password;
        jdbc_is_connected.value = true

        console.log("getJdbcConnection: success");

      })
      .catch(function (error) {
        window.alert("getJdbcConnection: axios error" + error)
        console.error("getJdbcConnection: axios error", error);
      })
      .finally(function () {
        console.log("getJdbcConnection: axios done")
      })
}

//设置连接
const setJdbcConnection = function (
    new_jdbc_type,
    new_jdbc_url,
    new_jdbc_username,
    new_jdbc_password
) {
  console.log(
      "setJdbcConnection: called",
      new_jdbc_type,
      new_jdbc_url,
      new_jdbc_username,
      new_jdbc_password
  )
  axios.post("/api/config/set", null, {
    params: {
      // db: '`' + new_jdbc_type + '`',
      // address: '`' + new_jdbc_url + '`',
      // username: '`' + new_jdbc_username + '`',
      // password: '`' + new_jdbc_password + '`'
      db: new_jdbc_type,
      address: new_jdbc_url,
      username: new_jdbc_username,
      password: new_jdbc_password
    }
  })
      .then(function (response) {
        const result = response.data
        if (
            !Object.hasOwn(result, "code") ||
            result.code !== HttpStatusCode.Ok
        ) {
          if (Object.hasOwn(result, "msg"))
            window.alert("setJdbcConnection: " + result.msg)
          resetParams()
          console.error("setJdbcConnection: response code error", result);
          return;
        }

        jdbc_type.value = new_jdbc_type;
        jdbc_url.value = new_jdbc_url;
        jdbc_username.value = new_jdbc_username;
        jdbc_password.value = new_jdbc_password;
        jdbc_is_connected.value = true;

        console.log(
            "setConnection:success",
            new_jdbc_type,
            new_jdbc_url,
            new_jdbc_username,
            new_jdbc_password
        );
      })
      .catch(function (error) {
        resetParams()
        console.error("setJdbcConnection: axios error", error);
      })
}

//获取可用数据库列表
const getDbList = function () {
  console.log("getDbList: called")
  axios.get("/api/database/getAll")
      .then(function (response) {
        // 能到达此处，HTTP的状态码已经有axios校验过，仅需处理若依封装的状态码

        // 从响应中取若依封装的AjaxResult
        const result = response.data
        if (
            !Object.hasOwn(result, "code") ||
            !Object.hasOwn(result, "data") ||
            result.code !== HttpStatusCode.Ok
        ) {
          if (Object.hasOwn(result, "msg"))
            window.alert("getDbList: " + result.msg)
          console.error("getDbList: result code error", result);
          // 状态错误，连接未建立
          resetParams()
          return;
        }

        db_list.value = result.data.map(item => ({name: item}));
        console.log(db_list)

        console.log("getDbList: success");

      })
      .catch(function (error) {
        console.error("getDbList: axios error", error);
      })
      .finally(function () {
        console.log("getDbList: axios done")
      })
}

//获取可用数据库列表
const getDbUsed = function () {
  console.log("getDbUsed: called")
  axios.get("/api/database/get")
      .then(function (response) {
        // 能到达此处，HTTP的状态码已经有axios校验过，仅需处理若依封装的状态码

        // 从响应中取若依封装的AjaxResult
        const result = response.data
        if (
            !Object.hasOwn(result, "code") ||
            !Object.hasOwn(result, "data") ||
            result.code !== HttpStatusCode.Ok
        ) {
          if (Object.hasOwn(result, "msg"))
            window.alert("getDbUsed: " + result.msg)
          console.error("getDbUsed: result code error", result);
          // 状态错误，未指定table
          db_name.value = "";
          return;
        }

        const db_prop = result.data;

        if (
            !Object.hasOwn(db_prop, "dbname")
        ) {
          db_name.value = "";
          console.error("getDbUsed: response format illegal", db_prop);
          return;
        }

        db_name.value = db_prop.dbname;

        console.log("getDbUsed: success");

      })
      .catch(function (error) {
        console.error("getDbUsed: axios error", error);
      })
      .finally(function () {
        console.log("getDbUsed: axios done")
      })
}

//设置连接
const setDbUsed = function (new_db_name) {

  console.log("setDbUsed: called", new_db_name)

  axios.post("/api/database/set", null, {
    params: {
      dbname: '`' + new_db_name + '`'
    }
  })
      .then(function (response) {
        const result = response.data
        if (
            !Object.hasOwn(result, "code") ||
            result.code !== HttpStatusCode.Ok
        ) {
          if (Object.hasOwn(result, "msg"))
            window.alert("setDbUsed: " + result.msg)
          resetParams()
          console.error("setDbUsed: response code error", result);
          return;
        }

        db_name.value = new_db_name;

        console.log("setDbUsed:success", new_db_name);
      })
      .catch(function (error) {
        resetParams()
        console.error("setDbUsed: axios error", error);
      })
}


//增加数据库
const insertTable = function () {
  insertdialogVisible.value = false;
  console.log("insertTable: called")
  axios.post("/api/table/execute", {
    tableName: table_name.value,
    columnValues: insertform2,
    type: "insert",
  })
      .then(function (response) {
        const result = response.data
        if (
            !Object.hasOwn(result, "code") ||
            result.code !== HttpStatusCode.Ok
        ) {
          if (Object.hasOwn(result, "msg"))
            window.alert("insertTable: " + result.msg)
          // resetParams()
          console.error("insertTable: response code error", result);
          queryByTable(table_name.value, 1, 100)
          return;
        }
        console.log("insertTable:success");
        queryByTable(table_name.value, 1, 100)
      })
      .catch(function (error) {
        // resetParams()
        console.error("insertTable: axios error");
        queryByTable(table_name.value, 1, 100)
      })
}

//获取自动提交配置
const getAutoCommitStatus = function () {
  console.log("getAutoCommitStatus: called")
  axios.get("/api/table/commit/get")
      .then(function (response) {
        // 能到达此处，HTTP的状态码已经有axios校验过，仅需处理若依封装的状态码

        // 从响应中取若依封装的AjaxResult
        const result = response.data
        if (
            !Object.hasOwn(result, "code") ||
            !Object.hasOwn(result, "data") ||
            result.code !== HttpStatusCode.Ok
        ) {
          if (Object.hasOwn(result, "msg"))
            window.alert("getJdbcConnection: " + result.msg)
          console.error("getJdbcConnection: result code error", result);
          // 状态错误，连接未建立
          // resetParams()
          return;
        }

        const auto_commit_prop = result.data;
        console.log("getAutoCommitStatus",auto_commit_prop)

        if (
            !Object.hasOwn(auto_commit_prop, "autoCommit")
        ) {
          // resetParams()
          console.error("getAutoCommitStatus: response auto_commit_prop format illegal", auto_commit_prop);
          return;
        }

        auto_commit_status.value = auto_commit_prop["autoCommit"] === 'true';

        console.log("getAutoCommitStatus: success",auto_commit_status.value);

      })
      .catch(function (error) {
        // window.alert("getAutoCommitStatus: axios error" + error)
        console.error("getAutoCommitStatus: axios error", error);
      })
      .finally(function () {
        console.log("getAutoCommitStatus: axios done")
      })
}

//设置自动提交
const setAutoCommitStatus = function (
    new_auto_commit_status
) {
  console.log(
      "setAutoCommitStatus: called",
      new_auto_commit_status
  )

  let new_auto_commit_param = -1;
  if (
      new_auto_commit_status === 1 ||
      new_auto_commit_status === true ||
      new_auto_commit_status === "true"
  ) new_auto_commit_param = 1
  if (
      new_auto_commit_status === 0 ||
      new_auto_commit_status === false ||
      new_auto_commit_status === "false"
  ) new_auto_commit_param = 0

  if (new_auto_commit_param === -1) {
    console.error("setAutoCommitStatus: param illegal", new_auto_commit_status)
    return
  }

  axios.post("/api/table/commit/set", null, {
    params: {
      flag: new_auto_commit_param
    }
  })
      .then(function (response) {
        const result = response.data
        if (
            !Object.hasOwn(result, "code") ||
            result.code !== HttpStatusCode.Ok
        ) {
          if (Object.hasOwn(result, "msg"))
            window.alert("setAutoCommitStatus: " + result.msg)
          resetParams()
          console.error("setAutoCommitStatus: response code error", result);
          return;
        }

        auto_commit_status.value = new_auto_commit_param === 1

        console.log(
            "setAutoCommitStatus:success",
            new_auto_commit_param,
            new_auto_commit_status,
        );
      })
      .catch(function (error) {
        resetParams()
        console.error("setAutoCommitStatus: axios error", error);
      })
}

//执行提交
const doCommit = function () {
  console.log("doCommit: called")
  if(auto_commit_status.value){
    console.log("doCommit: auto commit is on, this action is pointless")
    window.alert("doCommit: auto commit is on, this action is pointless")
    return
  }

  axios.post("/api/table/commit/commit")
      .then(function (response) {
        const result = response.data
        if (
            !Object.hasOwn(result, "code") ||
            result.code !== HttpStatusCode.Ok
        ) {
          if (Object.hasOwn(result, "msg"))
            window.alert("doCommit: " + result.msg)
          // auto_commit_status.value=true
          console.error("doCommit: response code error", result);
          return;
        }

        console.log( "doCommit:success");

        queryByTable(table_name.value,1,100)
      })
      .catch(function (error) {
        resetParams()
        console.error("doCommit: axios error", error);
      })
}

//执行回滚
const doRollback = function () {
  console.log("doRollback: called")
  if(auto_commit_status.value){
    console.log("doRollback: auto commit is on, this action is pointless")
    window.alert("doRollback: auto commit is on, this action is pointless")
    return
  }

  axios.post("/api/table/commit/rollback")
      .then(function (response) {
        const result = response.data
        if (
            !Object.hasOwn(result, "code") ||
            result.code !== HttpStatusCode.Ok
        ) {
          if (Object.hasOwn(result, "msg"))
            window.alert("doRollback: " + result.msg)
          // auto_commit_status.value=true
          console.error("doRollback: response code error", result);
          return;
        }

        console.log( "doRollback:success");

        queryByTable(table_name.value,1,100)
      })
      .catch(function (error) {
        resetParams()
        console.error("doRollback: axios error", error);
      })
}

// 点击增加数据
const myinsert = function (row) {
  console.info("insert dialog open");
  insertform2 = row;
  Object.keys(insertform2).forEach((key) => (insertform2[key] = ""));
  console.info(insertform2);

  insertdialogVisible.value = true;
  return;
}
// 点击取消按键
const mycancel = function () {
  console.info("mycancel");
  console.info(insertform2);
  insertdialogVisible.value = false;

}

//更新数据库
const updateTable = function () {
  dialogVisible.value = false;
  console.log("updateTable: called")
  axios.post("/api/table/execute", {
    tableName: table_name.value,
    columnValues: form,
    whereValues: oldform,
    type: "update",
  })
      .then(function (response) {
        const result = response.data
        if (
            !Object.hasOwn(result, "code") ||
            result.code !== HttpStatusCode.Ok
        ) {
          if (Object.hasOwn(result, "msg"))
            window.alert("updateTable: " + result.msg)
          // resetParams()
          console.error("updateTable: response code error", result);
          queryByTable(table_name.value, 1, 100)
          return;
        }
        console.log("updateTable:success");
        queryByTable(table_name.value, 1, 100)
      })
      .catch(function (error) {
        // resetParams()
        console.error("updateTable: axios error");
        queryByTable(table_name.value, 1, 100)
      })
}
// 删除该数据条目
const deleteTable = function (row) {
  delDialogVisible.value = false;
  console.log("deleteTable: called")
  // confirm("是否选择删除该条目？")
  axios.post("/api/table/execute", {
    tableName: table_name.value,
    columnValues: form,
    whereValues: oldform,
    type: "delete",
  }).then(function (response) {
    console.log("deleteTable:success");
    queryByTable(table_name.value, 1, 100)
  })
      .catch(function (error) {
        // resetParams()
        console.error("deleteTable: axios error");
        queryByTable(table_name.value, 1, 100)
      })
}
// 点击编辑数据
const myedit = function (row) {
  console.info("edit dialog open")
  form = row;
  oldform = JSON.parse(JSON.stringify(form));
  dialogVisible.value = true;
  return;
}
// 点击删除数据
const mydelete = function (row) {
  console.info("delete dialog open");
  form = row;
  oldform = JSON.parse(JSON.stringify(form));
  delDialogVisible.value = true;
}
// 点击取消按键
const cancel = function () {
  console.info(form);
  form = oldform;
  console.info(form);
  dialogVisible.value = false;
  delDialogVisible.value = false;
}
//获取可用数据库列表
const getTableList = function () {
  console.log("getTableList: called")
  axios.get("/api/tables")
      .then(function (response) {
        // 能到达此处，HTTP的状态码已经有axios校验过，仅需处理若依封装的状态码

        // 从响应中取若依封装的AjaxResult
        const result = response.data
        if (
            !Object.hasOwn(result, "code") ||
            !Object.hasOwn(result, "data") ||
            result.code !== HttpStatusCode.Ok
        ) {
          if (Object.hasOwn(result, "msg"))
            window.alert("getTableList: " + result.msg)
          console.error("getTableList: result code error", result);
          // 状态错误，数据库未指定模式
          resetParams()
          return;
        }

        table_list.value = response.data.data.map(item => ({name: item}))

        console.log("getTableList: success");

      })
      .catch(function (error) {
        console.error("getTableList: axios error", error);
      })
      .finally(function () {
        console.log("getTableList: axios done")
      })
}

const queryByTable = function (query_table_name, page_num, page_size) {
  if (query_table_name === "" || page_num < 1) {
    console.log("queryByTable: invalid params")
    window.alert("queryByTable: invalid params")
    return
  }
  axios.get("/api/table/get", {
    params: {
      tbname: query_table_name,
      pagenum: page_num,
      pagesize: page_size
    }
  })
      .then(function (response) {
        const result = response.data
        if (
            !Object.hasOwn(result, "code") ||
            !Object.hasOwn(result, "data") ||
            result.code !== HttpStatusCode.Ok
        ) {
          if (Object.hasOwn(result, "msg"))
            window.alert("queryByTable: " + result.msg)
          console.error("queryByTable: result code error", result);
          query_result.value = [];
          table_name.value = "";
          return;
        }
        query_result.value = result.data
        console.log('@@@@', result.data, '@@@');
        console.log("queryByTable: success");

      })
      .catch(function (error) {
        console.error("queryByTable: axios error", error);
      })
      .finally(function () {
        console.log("queryByTable: axios done")
      })
}


//------------------初始化语句--------------------

onMounted(function () {
  resetParams();
  testProxyConnection();
  // setJdbcConnection(
  //     "MySQL",
  //     "localhost:3306",
  //     "paste_u",
  //     "TX0A13fA_paste_u"
  // )
  getJdbcConnection()
  console.log(`the component is now mounted.`)
})

const small = ref(false)
const background = ref(false)
const disabled = ref(false)

const currentPage = ref(1);
const pageSize = ref(10);

const currentPageData = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value;
  const end = start + pageSize.value;
  return query_result.value.slice(start, end);
});

const handleSizeChange = (val) => {
  pageSize.value = val;
  currentPage.value = 1;
};

const handleCurrentChange = (val) => {
  currentPage.value = val;
};

const handleAutoCommitChange = function(val){
  console.log("handleAutoCommitChange: param=",val,auto_commit_status.value)
  setAutoCommitStatus(auto_commit_status.value)
}

</script>

<template>

  <el-main id="cloud-cat-jdbc">
    <!--    <el-button @click="getDbList">-->
    <!--      getDbList-->
    <!--    </el-button>-->
    <!--    <el-table :data="db_list" @row-click="row=>{db_name=row.name;}">-->
    <!--      <el-table-column prop="name" label="Database Name"/>-->
    <!--    </el-table>-->
    <el-collapse>
      <el-collapse-item name="1">
        <template #title>
          Jdbc Config
          <el-icon v-if="jdbc_is_connected" color="green">
            <CircleCheckFilled/>
          </el-icon>
          <el-icon v-else color="orange">
            <WarningFilled/>
          </el-icon>
          <div v-show="jdbc_is_connected" class="collapse-comment">
            {{ jdbc_type }}://{{ jdbc_username }}@{{ jdbc_url }}
          </div>
        </template>
        <el-row>
          <el-col :span="8"><p>db_type</p></el-col>
          <el-col :span="8">
            <el-input v-model="jdbc_type"/>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8"><p>db_url</p></el-col>
          <el-col :span="8">
            <el-input v-model="jdbc_url"/>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8"><p>db_username</p></el-col>
          <el-col :span="8">
            <el-input v-model="jdbc_username"/>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8"><p>db_password</p></el-col>
          <el-col :span="8">
            <el-input v-model="jdbc_password"/>
          </el-col>
        </el-row>
        <el-row>
          <el-col :offset="8" :span="4">
            <el-button type="info" @click="getJdbcConnection">get</el-button>
          </el-col>
          <el-col :span="4">
            <el-button
                type="success"
                @click="setJdbcConnection(jdbc_type,jdbc_url,jdbc_username,jdbc_password)"
            >set
            </el-button>
          </el-col>
        </el-row>
      </el-collapse-item>

      <el-collapse-item name="2">
        <template #title>
          Database Config
          <el-icon v-if="db_list.some(item => item.name === db_name)" color="green">
            <CircleCheckFilled/>
          </el-icon>
          <el-icon v-else color="orange">
            <WarningFilled/>
          </el-icon>
          <div class="collapse-comment">
            {{ db_name }}
          </div>
        </template>
        <el-row>
          <el-col :span="8"><p>db_list</p></el-col>
          <!--          <el-col :span="8" v-show="db_list.length>0">-->
          <!--            <el-table :data="db_list" @row-click="row=>{db_name=row.name;}">-->
          <!--              <el-table-column prop="name" label="Database Name"/>-->
          <!--            </el-table>-->
          <!--          </el-col>-->
          <el-col :span="4" v-show="db_list.length>0">
            <el-select v-model="db_name" value-key="name" placeholder="select db name">
              <el-option
                  v-for="item in db_list"
                  :key="item.name"
                  :label="item.name"
                  :value="item.name"
              />
            </el-select>
            <!--            <el-table :data="db_list" @row-click="row=>{db_name=row.name;}">-->
            <!--              <el-table-column prop="name" label="Database Name"/>-->
            <!--            </el-table>-->
          </el-col>
        </el-row>
        <!--        <el-row>-->
        <!--          <el-col :span="8"><p>db_name</p></el-col>-->
        <!--          <el-col :span="8">-->
        <!--            <el-input v-model="db_name"/>-->
        <!--          </el-col>-->
        <!--        </el-row>-->
        <el-row>
          <el-col :offset="4" :span="4">
            <el-button type="info" @click="getDbList">getList</el-button>
          </el-col>
          <el-col :span="4">
            <el-button type="info" @click="getDbUsed">getUsed</el-button>
          </el-col>
          <el-col :span="4">
            <el-button type="success" @click="setDbUsed(db_name)">setUsed</el-button>
          </el-col>
        </el-row>

      </el-collapse-item>

      <el-collapse-item name="3">
        <template #title>
          Table Config
          <el-icon v-if="table_list.some(item => item.name === table_name)" color="green">
            <CircleCheckFilled/>
          </el-icon>
          <el-icon v-else color="orange">
            <WarningFilled/>
          </el-icon>
          <div class="collapse-comment">
            {{ table_name }}
          </div>
        </template>
        <el-row>
          <el-col :span="8"><p>table_list</p></el-col>
          <!--          <el-col :span="8" v-show="table_list.length>0">-->
          <!--            <el-table :data="table_list" @row-click="row=>{table_name=row.name;}">-->
          <!--              <el-table-column prop="name" lable="Table Name"/>-->
          <!--            </el-table>-->
          <!--          </el-col>-->
          <el-select v-model="table_name" value-key="name" placeholder="select table name">
            <el-option
                v-for="item in table_list"
                :key="item.name"
                :label="item.name"
                :value="item.name"
            />
          </el-select>
        </el-row>
        <!--        <el-row>-->
        <!--          <el-col :span="8"><p>table_name</p></el-col>-->
        <!--          <el-col :span="8">-->
        <!--            <el-input v-model="table_name"/>-->
        <!--          </el-col>-->
        <!--        </el-row>-->
        <el-row>
          <el-col :offset="8" :span="4">
            <el-button type="info" @click="getTableList">getList</el-button>
          </el-col>
          <el-col :span="4">
            <el-button type="info" @click="queryByTable(table_name,1,100)">query</el-button>
          </el-col>
        </el-row>
        <br>
        <el-row>
          <el-col :offset="2" :span="4">
            auto commit
          </el-col>
          <el-col :offset="2" :span="4">
            <el-switch
                v-model="auto_commit_status"
                @change="handleAutoCommitChange"
                active-text="auto"
                inactive-text="manual"
            />
          </el-col>
          <el-col :span="4">
            <el-button type="info" :disabled="auto_commit_status" @click="doCommit">commit</el-button>
          </el-col>
          <el-col :span="4">
            <el-button type="info" :disabled="auto_commit_status" @click="doRollback">rollback</el-button>
          </el-col>
        </el-row>

      </el-collapse-item>

      <el-collapse-item name="5">


        <div id="fun-call">
          <el-button @click="getAutoCommitStatus">getAutoCommitStatus</el-button>
          <el-button @click="setAutoCommitStatus(1)">setAutoCommitStatus(1)</el-button>
          <el-button @click="setAutoCommitStatus(0)">setAutoCommitStatus(0)</el-button>
          <el-button @click="doCommit">commit</el-button>
          <el-button @click="doRollback">rollback</el-button>
          <br>

          <el-button @click="getColumnsList(table_name)">
            queryByTable({{ table_name }})
          </el-button>
          <el-button @click="getJdbcConnection">
            getJdbcConnection
          </el-button>
          <el-button @click="getDbList">
            getDbList
          </el-button>
          <el-button @click="getDbUsed">
            getDbUsed
          </el-button>
          <el-button @click="getTableList">
            getTableList
          </el-button>
          <br>

          <el-button
              @click='
             setJdbcConnection(
                 "MySQL",
                 "localhost:3306",
                 "root",
                 "123456"
                 )
          '
          >
            setJdbcConnection
          </el-button>

          <el-button @click='setDbUsed("pastedb")'>
            setDbUsed
          </el-button>

          <el-button @click="queryByTable(table_name,1,10)">
            queryByTable({{ table_name }},1,10)
          </el-button>

        </div>

        <!--    <div id="var-show">-->
        <!--      <table>-->
        <!--        <tr>-->
        <!--          <th>Variable</th>-->
        <!--          <th>Value</th>-->
        <!--        </tr>-->
        <!--        <tr v-for="(variable, key) in globalVariables" :key="key">-->
        <!--          <td>{{ key }}</td>-->
        <!--          <td>{{ variable.value }}</td>-->
        <!--          <td>-->
        <!--            &lt;!&ndash;            v-if="(typeof variable.value) in ['string','number','object']"&ndash;&gt;-->
        <!--            <input v-model="variable.value" placeholder="new"/>-->
        <!--          </td>-->
        <!--        </tr>-->
        <!--      </table>-->
        <!--    </div>-->

        <div id="jdbc-settings">
          <el-collapse>

          </el-collapse>
        </div>

        <div>
          <el-table :data="globalVariables">
            <el-table-column prop="key" label="Variable"></el-table-column>
            <el-table-column prop="value" label="Value"></el-table-column>
            <el-table-column label="New Value">
              <template v-slot="{ row }">
                <el-input v-if="isEditable(row)" v-model="row.value" placeholder="new"></el-input>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-collapse-item>

    </el-collapse>


    <div id="result-show">
      <!-- <el-table :data="query_result">
        <template v-if="query_result.length > 0">
          <el-table-column v-for="(value, key) in query_result[0]" :key="key" :prop="key" :label="key"/>
        </template>
      </el-table> -->
      <el-table :data="currentPageData">
        <template v-if="query_result.length > 0">
          <el-table-column v-for="(value, key) in query_result[0]" :key="key" :prop="key" :label="key"/>
          <el-table-column label="action" width="240">
            <template v-slot="scope">
              <el-button type="info" size="small" @click="myinsert(scope.row)">insert</el-button>
              <el-button type="info" size="small" @click="myedit(scope.row)">update</el-button>
              <el-button type="info" size="small" @click="mydelete(scope.row)">delete</el-button>
            </template>
          </el-table-column>
          <!--			  <el-table-column label="opreate">-->
          <!--			  	  <template v-slot="scope" >-->
          <!--					   <el-button type="info" @click="myinsert(scope.row)">insert</el-button>-->
          <!--			  	  </template>-->
          <!--			  </el-table-column>-->
          <!--        <el-table-column label="opreateOne">-->
          <!--          <template v-slot="scope" >-->
          <!--            <el-button type="info" @click="myedit(scope.row)">update</el-button>-->
          <!--          </template>-->
          <!--        </el-table-column>-->
          <!--        <el-table-column label="opreateTwo">-->
          <!--          <template v-slot="scope" >-->
          <!--            <el-button type="info" @click="mydelete(scope.row)">delete</el-button>-->
          <!--          </template>-->
          <!--        </el-table-column>-->
        </template>
      </el-table>

      <!-- 增加对话框 -->
      <el-dialog
          v-model="insertdialogVisible"
          title="Insert"
          width="30%"
      >
        <el-form :model="insertform2">
          <el-form-item v-for="(v,k,index) in insertform2" :label="k" :label-width="formLabelWidth">
            <el-input

                v-model="insertform2[k]"
                placeholder="Please input"/>
          </el-form-item>
        </el-form>

        <template #footer>
			    <span class="dialog-footer">
			      <el-button @click="mycancel();queryByTable(table_name,1,100)">取消</el-button>
			      <el-button type="primary" @click="insertTable();queryByTable(table_name,1,100)">确认</el-button>
			    </span>
        </template>
      </el-dialog>


      <!-- <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5,10, 20, 50, 100]"
      :page-size="pageSize"
      :total="query_result.length"
      /> -->

      <!-- 修改对话框 -->
      <el-dialog
          v-model="dialogVisible"
          title="Update"
          width="30%"
      >
        <el-form :model="form">
          <el-form-item v-for="(v,k,index) in form" :label="k" :label-width="formLabelWidth">
            <el-input
                v-model="form[k]"
                placeholder="Please input"/>
          </el-form-item>
        </el-form>
        <template #footer>
		    <span class="dialog-footer">
		      <el-button @click="cancel();queryByTable(table_name,1,100)">取消</el-button>
		      <el-button type="primary" @click="updateTable();queryByTable(table_name,1,100)">确认</el-button>
		    </span>
        </template>
      </el-dialog>

      <!-- 删除提醒对话框 -->
      <el-dialog
          v-model="delDialogVisible"
          title="Delete"
          width="30%"
      >
        是否删除该项条目？
        <template #footer>
				    <span class="dialog-footer">
				      <el-button @click="cancel();queryByTable(table_name,1,100)">取消</el-button>
				      <el-button type="primary" @click="deleteTable();queryByTable(table_name,1,100)">确认</el-button>
				    </span>
        </template>
      </el-dialog>

      <!--      <el-pagination-->
      <!--      @size-change="handleSizeChange"-->
      <!--      @current-change="handleCurrentChange"-->
      <!--      :current-page="currentPage"-->
      <!--      :page-sizes="[5,10, 20, 50, 100]"-->
      <!--      :page-size="pageSize"-->
      <!--      :total="query_result.length"-->
      <!--      />-->
      <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :small="small"
          :disabled="disabled"
          :background="background"
          layout="total, sizes, prev, pager, next, jumper"
          :total="query_result.length"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </div>

  </el-main>

</template>

<style scoped>

#var-show td {
  border: solid #589ef8;
  border-collapse: collapse;
  border-spacing: 0;
  overflow: hidden;
}

.collapse-comment {
  font-size: smaller;
  padding-left: 10px;
  opacity: 60%;
}
</style>